<template>
	<div class="swipBoxWrap">
		<div class="swiper-container" id="swiper1">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(i,index) in arrData" :key="index">
					<div class="absss">
						<ul :class="['case_lists', index == 0 ? 'case_1' : index == 1 ? 'case_2': 'case_3']">
							<li class="lli">{{ 'NO.' + (index + 1) + ' 组合方案' }}</li>
							<li v-for="(item, index_2) of i.children" :key="index_2">{{item}}</li>
							<!-- <li class="line"></li> -->
						</ul>
					</div>
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
	</div>

</template>
<script>
	import 'swiper/dist/css/swiper.css';
	export default {
		props: {
			arrData: Array
		},
		data() {
			return {};
		},
		methods: {


		},
		mounted() {}
	}
</script>
<style lang="less">
	// @import '~/static/css/swiper.min.css';
	.swipBoxWrap {
		.swiper-container {
			margin-top: 0.2rem;
			width: 7.5rem;
			height: auto;
			margin-bottom: 0.2rem;
			overflow: visible !important;
		}

		.swiper-container .swiper-wrapper .swiper-slide {
			width: 6.2rem;
			border-radius: 0.2rem;
		}

		.absss {
			background: #FFF;
			padding: 0.3rem 0.3rem;
		}

		.swiper-container .swiper-wrapper .swiper-slide .absss {
			width: 100%;
			height: 6rem;
			border-radius: 0.2rem;
			box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);

			.case_lists {
				list-style: none !important;
				padding-left: 0;
				position: relative;

				li {
					text-align: center;
					width: 5.7rem;
					height: 1rem;
					border-radius: 0.5rem;
					line-height: 1rem;
					background: #FAFAFA;
					margin-bottom: 0.3rem;
					color: #222;
					font-size: 0.3rem;
					font-weight: bold;
					letter-spacing: 0.03rem;
				}

				li.line {
					position: absolute;
					bottom: 0;
					right: 49%;
					width: 0.06rem;
					height: 2.85rem;
					background: #FAFAFA;
				}

				.lli {
					color: #fff;
				}
			}
		}

		.case_1 li:first-child {
			background: #fff url('~/static/images/select courses_banner_no1.png') no-repeat !important;
			background-size: 100% 100% !important;
		}

		.case_2 li:first-child {
			background: #fff url('~/static/images/select courses_banner_no2.png') no-repeat !important;
			background-size: 100% 100% !important;
		}

		.case_3 li:first-child {
			background: #fff url('~/static/images/select courses_banner_no3.png') no-repeat !important;
			background-size: 100% 100% !important;
		}

		.swiper-container .swiper-wrapper .swiper-slide-prev .absss {
			margin-top: 0.3rem;
			height: 5.4rem !important;

		}

		.swiper-container .swiper-wrapper .swiper-slide-prev .absss,
		.swiper-container .swiper-wrapper .swiper-slide-next .absss {
			.case_lists {
				list-style: none !important;
				padding-left: 0;
				position: relative;

				li {
					text-align: center;
					width: 5.7rem;
					height: 0.9rem;
					border-radius: 0.45rem;
					line-height: 0.9rem;
					background: #FAFAFA;
					margin-bottom: 0.26rem;
					color: #222;
					font-size: 0.3rem;
					font-weight: bold;
				}

				li.line {
					position: absolute;
					bottom: 0;
					right: 49%;
					width: 0.06rem;
					height: 2.85rem;
					background: #FAFAFA;
				}
			}
		}

		.swiper-container .swiper-wrapper .swiper-slide-next .absss {
			margin-top: 0.3rem;
			height: 5.4rem !important;
		}

		.swiper-container .swiper-wrapper .swiper-slide-active {
			width: 6.2rem;
		}

		.swiper-pagination {
			bottom: -0.3rem !important;
		}

		.swiper-pagination .swiper-pagination-bullet {
			width: 12px;
			height: 12px;
			background: #ff1e1e;
		}

		.swiper-pagination .swiper-pagination-bullet-active {
			width: 21px;
			height: 12px;
			background: #e75230;
			border-radius: 6px;
		}
	}
</style>
